<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xml:lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		
		<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<link rel="stylesheet" href="css/base.css" media="screen" type="text/css" />
		
		<script src="js/iphonejs.js" type="text/javascript"></script>
		
		<script>
		
		window.onload = function(){
			//apply orientation on body
			$(document.body).orientation();
			
			$("#transition").viewport({
										backBtn:$("#backbutton"),
										logo:$("#logo")}
									);
		};
		</script>
	</head>
	
	<body orient="profile">
	
	    <div class="demo-topo">
	    	<a href="javascript:void(0)" id="backbutton" class="button-back">voltar</a>
	    	<h1 id="logo">iPhoneJs</h1>
	    </div>
	    
		<div class="demo-transition" id="transition">
			<h2>itens</h2>
			<ul>
				<li>
					<a href="item1.html" onclick="return false;">
						item 1
					</a>
				</li>
				<li>
					<a href="item2.html">
						item 2
					</a>
				</li>
				<li>
					<a href="item3.html">
						item 2
					</a>
				</li>
			</ul>	
		</div>
		
		<div id="footer" class="demo-rodape">
			iPhoneJS 2009
		</div>
	</body>
</html>
